<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>post方法</title>
    <script src="angularjs/angular.min.js"></script>
    <link rel="stylesheet" href="bootstrap.min.css"/>
</head>

<style>
    .ng-valid.ng-dirty{
        border-color: green;
    }
    .ng-invalid.ng-dirty{
        border-color: red;
    }
</style>
</head>
<!-- apply the module and controller to our body so angular is applied to that -->
<body ng-app="formApp" ng-controller="formController">
<div class="container">
    <div class="col-md-6 col-md-offset-3">

        <!-- PAGE TITLE -->
        <div class="page-header">
            <h1><span class="glyphicon glyphicon-tower"></span> Submitting Forms with Angular</h1>
        </div>

        <!-- SHOW ERROR/SUCCESS MESSAGES -->
        <div id="messages" class="well" ng-show="message">{{ message }}</div>

        <!-- FORM -->
        <form ng-submit="processForm()">
            <!-- NAME -->
            <div id="name-group" class="form-group" ng-class="{ 'has-error' : errorName }">
                <label>Name</label>
                <input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name">
                <span class="help-block" ng-show="errorName">{{ errorName }}</span>
            </div>

            <!-- SUPERHERO NAME -->
            <div id="superhero-group" class="form-group" ng-class="{ 'has-error' : errorSuperhero }">
                <label>Superhero Alias</label>
                <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader" ng-model="formData.superheroAlias">
                <span class="help-block" ng-show="errorSuperhero">{{ errorSuperhero }}</span>
            </div>

            <!-- SUBMIT BUTTON -->
            <button type="submit" class="btn btn-success btn-lg btn-block">
                <span class="glyphicon glyphicon-flash"></span> Submit!
            </button>
        </form>

        <!-- SHOW DATA FROM INPUTS AS THEY ARE BEING TYPED -->
	<pre>
		{{ formData }}
	</pre>

        <script>
            // define angular module/app
            var formApp = angular.module('formApp', [])
                    .controller("formController",function($scope, $http) {
                        // create a blank object to hold our form information
                        // $scope will allow this to pass between controller and view
                        $scope.formData = {};


                        // process the form
                        $scope.processForm = function() {
                            var err = false;
                            if(err){
                                $http({
                                    method  : 'POST',
                                    url     : 'process.php',
                                    data    : $.param($scope.formData),  // pass in data as strings
                                    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
                                })
                                        .success(function(data) {
                                            console.log(data);
                                            if (!data.success) {
                                                // if not successful, bind errors to error variables
                                                $scope.errorName = data.errors.name;
                                                $scope.errorSuperhero = data.errors.superheroAlias;
                                            } else {
                                                // if successful, bind success message to message
                                                $scope.message = data.message;
                                                $scope.errorName = '';
                                                $scope.errorSuperhero = '';
                                            }
                                        });
                            }
                            else{
                                alert("error");
                            }

                        };
                    })
            // create angular controller and pass in $scope and $http

        </script>
</html>